<template>
	<view>
		<!-- 参考 https://gitee.com/umicro/uView2.0/blob/master/pages/componentsC/navbar/navbar.nvue -->
		<u-navbar :title="title" safeAreaInsetTop fixed placeholder :autoBack="true"></u-navbar>
		
		<u-sticky :offsetTop="offsetTop" z-index="999" bgColor="#FFF">
			<u-tabs :list="tags" keyName="name" @click="clickTag"></u-tabs>
		</u-sticky>
		
		<view class="post-list-box">
			<block v-for="post in postList" :key="post.id">
				<view class="post-item-box">
					<view class="title-box m-b-base" @click="navPost(post.id)">
						<text class="title">{{post.title}}</text>
					</view>
					<view class="tag-list-box m-b-base">
						<view class="tag-item" v-for="tag in post.tags" :key="tag.id">
							<u-tag :text="tag.name" :type="tag.type" :size="tag.size" :shape="tag.shape" :plain="tag.plain" :plainFill="tag.plainFill"></u-tag>
						</view>
					</view>
					<view class="info-box">
						<view class="info-left">
							<text>{{post.user.nickName + '发布于'}}</text>
							<text>{{post.publishTime | timeAgo}}</text>
						</view>
						<view class="info-right">
							<u-icon name="thumb-up" labelPos="right" :label="post.readCount"></u-icon>
							<u-icon name="star" labelPos="right" :label="post.collectCount"></u-icon>
						</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '',
				offsetTop: 0,
				
				cate: {},
				tags: [],
				postList: [],
				startId: 0, //测试用
			}
		},
		onLoad(options) {
			this.getCategory(options.cid)
			this.getTagsByCid(options.cid)
			this.getPostsByCidAndTid(options.cid, null)
		},
		onShow() {
			this.setOffestTop()
		},
		methods: {
			setOffestTop() {
				let systemInfo = uni.getSystemInfoSync()
				
				let isIOS = systemInfo.system.indexOf('iOS') > -1 // 判断ios终端
				let systemBarHeight = (!isIOS) ? 48 : 44
				this.offsetTop = systemInfo.statusBarHeight + systemBarHeight
			},
			
			getCategory() {
				this.cate = {
					id: '1',
					plate: {
						id: '1',
						title: '招聘求职'
					},
					title: '招聘'
				}
				this.title = this.cate.plate.title + '/' + this.cate.title
			},
			getTagsByCid(cid) {
				this.tags = [
					{
						id: '1',
						name: '包吃',
						type: 'primary',
						size: 30,
						shape: 'square',
						plain: false,
						plainFill: false
					},
					{
						id: '2',
						name: '包住',
						type: 'primary',
						size: 30,
						shape: 'square',
						plain: true,
						plainFill: true
					},
					{
						id: '3',
						name: '社保',
						type: 'primary',
						size: 30,
						shape: 'square',
						plain: true,
						plainFill: true
					}
				]
			},
			getPostsByCidAndTid(cid, tid) {
				let i=this.startId
				this.startId+=10
				console.log('i:' + i + ', start:' + this.startId)
				for (;i<this.startId; i++) {
					let post = {
						id: i.toString(),
						title: '测试一下2222',
						tags: [
							{
								id: '1',
								name: '包吃',
								type: 'primary',
								size: 30,
								shape: 'square',
								plain: true,
								plainFill: true
							},
							{
								id: '2',
								name: '包住',
								type: 'primary',
								size: 30,
								shape: 'square',
								plain: true,
								plainFill: true
							},
							{
								id: '3',
								name: '社保',
								type: 'primary',
								size: 30,
								shape: 'square',
								plain: true,
								plainFill: true
							}
						],
						user: {
							nickName: '张三'
						},
						publishTime: '2023-10-12 15:17:10',
						readCount: 1001,
						collectCount: 10
					}
					this.postList.push(post)
				}
			},
			
			clickTag(tag) {
				this.getPostsByCidAndTid(this.cate.id, tag.id)
			},
			navPost(postId) {
				uni.navigateTo({
					url: '/pages/post/postDetail?pid='+postId
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.post-list-box {
		margin: $uni-spacing-col-base $uni-spacing-row-base;
	}
	.m-b-base {
		// 8px
		margin-bottom: $uni-spacing-col-base;
	}
	
	.post-item-box {
		margin-bottom: $uni-spacing-col-xxl;
		
		.title {
			font-size: $uni-font-size-xl;
		}
		
		.tag-list-box {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
		}
		.tag-item:not(:first-child) {
			margin-left: 20rpx;
		}
		
		.info-box {
			display: flex;
			justify-content: space-between;
			.info-left {
				color: #909399;
			}
			.info-right {
				display: flex;
				justify-content: flex-end;
			}
		}
	}
</style>
